<!-- 搜索组件 -->
<template>
  <view class="comp-search-entrance">
    <!-- 搜索区 -->
    <view class="search-area">
      <view v-if="showCity" class="city-area" :style="{'background-color': bgColor}" @click="toSelectCity">
        <span>{{name}}</span>
        <basic-icons size="32rpx" name="icon-caret"/>
      </view>
      
      <view class="input-area" :class="{'not-empty': keyword}" :style="{'background-color': bgColor}" @tap="toSearch" >
        <basic-icons class="input-area-icon" size="36rpx" name="icon-search"/>
        
        <span class="content">{{keyword || placeholder}}</span>
        
        <uni-icons v-if="keyword" color="#999999" class="" size="24" type="clear" @click.native.stop="$emit('click:clear')" />
      </view>
    </view>
  </view>
</template>
<script>
import sdk from 'sdk'
export default {
  name: 'search-entrance',
  props: {
    showCity: { // 是否显示城市
      type: Boolean,
      default: false
    },

    name: {
      type: String,
      default: ''
    },

    keyword: {
      type: String,
      default: ''
    },

    placeholder: { // 输入框占位符
      type: String,
      required: true
    },
    bgColor: { // 输入框背景色
      type: String,
      default: '#fff'
    }
  },

  methods: {
    toSearch() {
      this.$emit('click:search')
    },

    toSelectCity() {
      this.$emit('click:city')
    }
  }
}
</script>
<style lang="less">
.comp-search-entrance {
  padding: 16rpx 0 0;

  .search-area {
    .flex;
    .flex-between;

    margin-bottom: 24rpx;
  }

  .city-area,
  .input-area {
    .flex;
    .flex-middle;
    
    background-color: #fff;
    border-radius: 38rpx;

    height: 72rpx;
    font-size: 28rpx;
    .input-area-icon{
      margin-right: 10rpx;
    }
  }

  .city-area {
    font-size: 28rpx;
    padding:  0 44rpx;
  }

  .input-area {
    .flex;
    .flex-middle;
    .flex-center;
    .flex-1;

    color: @font_light_color;
    margin-left: 10rpx;
    padding:  0 20rpx;

    &.align-left {
      .flex-start;
    }

    &.not-empty {
      .flex;

      .content {
        color: @font_color;
        .flex-1;
      }
    }
  }
}
</style>